<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hyves.net - Always in touch with your friends</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="<%=basePath %>/style/main.css" type="text/css" rel="stylesheet" />
		<link href="<%=basePath %>/style/style20.css" type="text/css" rel="stylesheet" />
		<link href="images/favicon.ico" type="image/x-icon"
			rel="shortcut icon" />
		<link href="<%=basePath %>/style/ie6.css" type="text/css" rel="stylesheet" />
		<link href="<%=basePath%>/style/pagination.css" type="text/css"
			rel="stylesheet" />
		<script language="javascript"
			src="<%=basePath%>/script/jquery1.3.2.js" type="text/javascript"></script>
		<script language="javascript"
			src="<%=basePath%>/script/jquery.pagination.js"
			type="text/javascript"></script>
		<script language="javascript" type="text/javascript">
			$(document).ready(function(){
				/* 分页插件Pagination */
				var _total_num = $("#total").val();
				var _group_id = $("#groupId").val();
				$("#pagination").pagination(_total_num, {
							items_per_page : 16,
							next_show_always : false,
							prev_show_always : false,
							callback : pageselectCallback
						});
				function pageselectCallback(page_index, jq) {
					$.ajax({
								type : "POST",
								dataType : "html",
								url : "<%=basePath%>/group/page4Member",
								data : {
									gid : _group_id,
									page_index : page_index
								},
								success : function(data) {
									$("#media-container").html(data);
								}
							});
				}
			});
		</script>
	</head>
	<body>

		<jsp:include page="/site/common/header.jsp"></jsp:include>

		<div id="page-con">
			<div id="page-con-hdr">
				<div class="box">
					<div class="groups-header">
						<div class="wrapper w2">
							<div class="section s1">
								<div id="page-con-info">
									<div class="avatar small">
										<a class="avatar-link" title="${group.name }"
											href="<%=basePath %>/group/view?id=${group.id }"><img
												class="avatar-img mediaicon14" alt="${group.name }"
												src="LifestyleS - Hyves_nl.files/226568633_14_e_MB.jpg" />
										</a>
									</div>
									<h1>
										<a href="<%=basePath %>/group/view?id=${group.id }">${group.name }</a>
									</h1>
									(Hyve)
									<ul id="profile-menu">
										<li class="first">
											<a href="http://lifestyles.hyves.nl/address/">About</a> |
										</li>
										<li>
											<a href="http://lifestyles.hyves.nl/photos/">Photos</a> |
										</li>
										<li>
											<a href="http://lifestyles.hyves.nl/forum/">Messages</a> |
										</li>
										<li class="last" id="profile-menu-more">
											<a class="sub-menu-title" onclick="return false;"
												href="javascript:void(0);">More</a>
											<div class="sub-menu">
												<div class="sub-menu-bg">
													<div class="sub-menu-bg-pimp">
														<div class="sub-menu-hdr">
															<div class="sub-menu-hdr-bg"></div>
														</div>
														<ul>
															<li class="current first">
																<a href="http://lifestyles.hyves.nl/members/">Members</a>
															</li>
															<li>
																<a href="http://lifestyles.hyves.nl/events/">Agenda</a>
															</li>
															<li>
																<a href="http://lifestyles.hyves.nl/polls/">Polls</a>
															</li>
															<li>
																<a href="http://lifestyles.hyves.nl/widget/">Gadgets</a>
															</li>
															<li>
																<a href="http://lifestyles.hyves.nl/blog/">Blogs</a>
															</li>
															<li class="last">
																<a href="http://lifestyles.hyves.nl/minibuzz/">Buzz</a>
															</li>
														</ul>
														<div class="sub-menu-bg-mf-pimp"></div>
													</div>
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="wrapper w4">
							<div class="section s1">
								<div class="box" id="tidalboard-google-ad">
									<div class="box-con">
										<div class="box-con-bg"></div>
										<div class="box-con-inner">
											<div id="adsense_f11_box" style="DISPLAY: none">
												<div class="adsbyg">
													Advertenties door Google
													<a href="http://google-feedback.hyves.nl/" target="_blank">?</a>
												</div>
												<div id="adsense_f11_content"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="box-con-bg"></div>
				</div>
				<div class="border"></div>
				<div class="bg"></div>
			</div>
			<!-- page-con-hdr -->
			<div id="page-con-body">
				<div class="wrapper w4">
					<div class="section s1">
						<div class="box friends">
							<div class="box-hdr">
								<div class="box-hdr-bg"></div>
								<div class="box-hdr-inner">
									<h2>
										圈内人 (${group.groupUserShip.size() })
									</h2>
									<div class="box-actns">
										<ul>
											<li class=" first">
												<a class="action-text"
													href="http://lifestyles.hyves.nl/hubmemberfriends/">Friends
													only</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="box-con">
								<div class="box-con-bg"></div>
								<div class="box-con-inner">
									<div class="QuickfinderSearchBox"
										id="quickfinder_simple_options">
										<div class="QuickfinderAdvancedContainer">
											<div class="QuickfinderAdvanced fakelink"
												onclick="Effect.toggle('quickfinder_simple_options', 'show');new Effect.toggle('quickfinder_advanced_options', 'show');">
												Advanced search
											</div>
										</div>
										<input class="QuickfinderInput" id="crit"
											onkeyup="memberFilter.scheduleRetrieve();"
											style="WIDTH: 300px; COLOR: #888"
											onfocus="this.value=''; this.style.color = '#000000'; this.onfocus = null;"
											value="Enter the first name of the hyver:" />
									</div>
									<div class="QuickfinderSearchBox"
										id="quickfinder_advanced_options" style="DISPLAY: none">
										<div class="QuickfinderAdvancedContainer">
											<div class="QuickfinderSimple fakelink"
												onclick="Effect.toggle('quickfinder_advanced_options', 'show'); Effect.toggle('quickfinder_simple_options', 'show');"></div>
										</div>
										<div>
											<span id="ajaxNotification"
												style="DISPLAY: none; FLOAT: left"><img
													alt="Please wait"
													src="F:\Tony's\&#31038;&#21306;&#32593;&#31449;&#31034;&#20363;\LifestyleS - Hyves_nl.files\ajax_action(1).gif" />
											</span>
											<select class="QuickfinderSelect" id="gender">
												<option value="" selected="selected">
													Gender::
												</option>
												<option label="Male" value="1">
													Male
												</option>
												<option label="Female" value="3">
													Female
												</option>
											</select>
											<select class="QuickfinderSelect" id="age">
												<option value="">
													Age:
												</option>
												<option label=" - " value="all" selected="selected">
													-
												</option>
												<option label="16-18" value="16-18">
													16-18
												</option>
												<option label="18-20" value="18-20">
													18-20
												</option>
												<option label="21-25" value="21-25">
													21-25
												</option>
												<option label="26-30" value="26-30">
													26-30
												</option>
												<option label="31-35" value="31-35">
													31-35
												</option>
												<option label="36-40" value="36-40">
													36-40
												</option>
												<option label="41-45" value="41-45">
													41-45
												</option>
												<option label="46-50" value="46-50">
													46-50
												</option>
												<option label="51-55" value="51-55">
													51-55
												</option>
												<option label="56-60" value="56-60">
													56-60
												</option>
												<option label="61-65" value="61-65">
													61-65
												</option>
												<option label="66-70" value="66-70">
													66-70
												</option>
												<option label="71-75" value="71-75">
													71-75
												</option>
												<option label="76-80" value="76-80">
													76-80
												</option>
												<option label="81-85" value="81-85">
													81-85
												</option>
												<option label="86-90" value="86-90">
													86-90
												</option>
												<option label="91-95" value="91-95">
													91-95
												</option>
												<option label="96-100" value="96-100">
													96-100
												</option>
												<option label=" &gt; 100" value="100-200">
													&gt; 100
												</option>
											</select>
											all
											<input class="QuickfinderInput" id="city"
												onfocus="this.value = ''; $(this).setStyle({color: '#000'}); this.onfocus = null;"
												value="Hometown:" name="city" autocomplete="off" />
											<select class="QuickfinderSelect" id="relation">
												<option value="" selected="selected">
													Relation:
												</option>
												<option label="Single" value="2">
													Single
												</option>
												<option label="Open relationship" value="3">
													Open relationship
												</option>
												<option label="Relationship" value="4">
													Relationship
												</option>
												<option label="Married" value="5">
													Married
												</option>
											</select>
											<input class="QuickfinderSubmit"
												onclick="memberFilter.retrieveAdvanced();" type="submit"
												value="Search" />
										</div>
									</div>
									<div class="QuickfinderResults"
										id="quickfind_memberoverview_pager" style="WIDTH: 100%">
										<table
											style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BORDER-RIGHT-WIDTH: 0px">
											<tbody>
												<tr>
													<td class="personal_text"
														style="PADDING-LEFT: 5px; TEXT-ALIGN: left">
														搜索到<b>${total }</b> 个结果
													</td>
												</tr>
											</tbody>
										</table>
										<div class="overview_twocolumn">
											<div id="pageDivId_quickfinder_hub_members_1">
												<input type="hidden" value="${group.id }" id="groupId" />
												<input type="hidden" value="${total }" id="total" />
												<ul class="media-list" id="media-container">
													<img alt="Loading..." src="<%=basePath %>/images/loading.gif"></img>
													图片正在加载中...
												</ul>
											</div>
											<div id="pagination" class="pagination paging"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="box group-new-members">
							<div class="box-hdr">
								<div class="box-hdr-bg"></div>
								<div class="box-hdr-inner">
									<h2>
										最近新入成员
									</h2>
								</div>
							</div>
							<div class="box-con">
								<div class="box-con-bg"></div>
								<div class="box-con-inner">
									<div id="pageDivId_hub_member_new_1">
										<ul class="avatar-list">
											<s:iterator value="newmember" id="n">
											<li>
												<div class="avatar large">
													<a class="avatar-link" title="${n.nick }" href="http://josh78.hyves.nl/"><img
															class="avatar-img" alt="${n.nick }"
															src="LifestyleS - Hyves_nl.files/791636266_14_ZHL9.jpg" />
													</a>
													<p class="avatar-name">
														<a title="${n.nick }" href="http://josh78.hyves.nl/">${n.nick }
															(${n.userFriendShip.size() })</a>
													</p>
												</div>
											</li>
											</s:iterator>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- section s1 -->
				</div>
				<!-- wrapper w4 -->
				<div class="border"></div>
				<div class="bg"></div>
			</div>
			<!-- page-con-body -->
			<div id="page-con-ftr">
				<div class="border"></div>
				<div class="bg"></div>
			</div>
			<!-- page-con-ftr -->
		</div>

		<jsp:include page="/site/common/footer.jsp"></jsp:include>

	</body>
</html>